import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    DeviceEventEmitter,
    TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
import { MarqueeHorizontal, MarqueeVertical } from 'react-native-marquee-ab';
import styles from './styles';

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";

const { width, height } = Dimensions.get('window')

export default class My extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            coin: '0.00',
            gold: '0.00',
            userinfo: null,
            refreshing: false,
            isLogin: false,
            fans: 0,
            acts: 0
        };
        this.listener = null;
    }
    static navigationOptions = {
        title: '我的',
        header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: 'transparent',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            marginTop: 18
        },
    }
    componentWillMount() {
        //组件将要被加载到视图之前调用
        this.setState({
            isLogin: Ugame.isLogin()
        });
    }
    componentDidMount() {
        this.listener = DeviceEventEmitter.addListener('updateLogin', (value) => {
            //这里面是要调用的方法，比如：刷新
            //value:是下面页面在 通知 时 ，所传递过来的参数
            this.setState({
                isLogin: Ugame.isLogin(),
                coin: '0.00',
                gold: '0.00',
            });
            this.getServerData(() => { });
        });
        if (Ugame.isLogin()) {
            this.getServerData(() => { });
        }
    }
    componentWillUnmount() {
        if (!!this.listener) {
            this.listener.remove();
        }
    }
    getServerData(callback) {
        let _this = this;
        console.log(Ugame.info.Token);
        //35801989194a19c7a1c7fee76d6ae2d8
        
        if (Ugame.isLogin()) {
            Httpc.get(REQUEST.GetUserInfo, { token: Ugame.info.Token }, function (res) {
                console.log(res);
                if (res.StatusCode == -2) {
                    Ugame.clearInfo();
                    _this.setState({
                        isLogin: Ugame.isLogin()
                    });
                } else {
                    if (res.StatusCode == 1) {
                        _this.setState({
                            userinfo: res.Data,
                        })
                    }
                    callback();
                }

            })
            Httpc.get(REQUEST.GetUserMoney, { token: Ugame.info.Token }, function (res) {
                console.log(res);
                if (res.StatusCode == 1) {
                    _this.setState({
                        coin: res.Data.coin,
                        gold: res.Data.gold,
                        fans: res.Data.fans,
                        acts: res.Data.acts
                    })
                }
                callback();
            })
        } else {
            this.setState({ refreshing: false });
        }

    }
    go_login() {
        let _this = this;
        this.props.navigation.navigate('Login', {
            refresh: () => {
                _this.setState({
                    isLogin: Ugame.isLogin()
                });
            }
        });
    }
    on_go_SafeContent() {
        if (this.state.isLogin) {
            this.props.navigation.navigate('SafeContent');
        } else {
            this.go_login();
        }
    }
    on_go_userinfo() {
        let userinfo = this.state.userinfo;
        if (userinfo == null) {
            return;
        }
        this.props.navigation.navigate('Userinfo', {
            nick: userinfo.nick,
            headimage: userinfo.headimage
        });
    }
    on_go_gameorder = () => {
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
        } else {
            this.props.navigation.navigate('GameOrder');
        }
    }
    on_go_Guanzhu = () => {
        if (this.state.isLogin) {
            this.props.navigation.navigate('Guanzhu');
        } else {
            this.go_login();
        }
    }
    on_go_site() {
        this.props.navigation.navigate('Site', {
            site: Ugame.site,
            logo: Ugame.base_img.header.logo
        })
    }
    _onRefresh = () => {
        this.setState({ refreshing: true });
        this.getServerData(function () {
            this.setState({ refreshing: false });
        }.bind(this));
    }
    user_noLogin() {
        return (
            <View style={styles.noLogin}>
                <Text>请登录查看更多信息，没有帐号请先注册</Text>
                <TouchableOpacity onPress={() => this.go_login()}>
                    <View style={styles.login_btn}>
                        <Text style={{ color: '#ffffff', fontSize: 16 }}>登录</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
    user_logined() {
        let user_head = require('../../image/js_img_user_head.png');
        let nick = '请输入昵称';
        let { userinfo, fans, acts } = this.state;
        if (!!userinfo) {
            if (!!userinfo.headimage) {
                user_head = { uri: userinfo.headimage };
            }
            if (!!userinfo.nick) {
                nick = userinfo.nick;
            }
        }
        return (
            <TouchableOpacity onPress={() => this.on_go_userinfo()}>
                <View>
                    <Image style={styles.bannerImg} source={require('../../image/js_img_bg_mine_userinfo.png')} />
                    <View style={styles.userinfo}>
                        <Image style={styles.user_head} source={user_head} />
                        <View style={styles.info}>
                            <View style={styles.nick}>
                                <Text style={{ color: '#ffffff' }}>{nick}</Text>
                                <Image style={styles.mine_edit} source={require('../../image/js_img_icon_mine_edit.png')} />
                            </View>
                            <View><Text style={{ color: '#ffffff', fontSize: 10 }}>粉丝{fans}人|关注{acts}人</Text></View>
                        </View>
                    </View>

                </View>
            </TouchableOpacity>
        );
    }
    on_go_AccountDetails = () => {
        if (this.state.isLogin) {
            this.props.navigation.navigate('AccountDetails');
        } else {
            this.go_login();
        }
    }
    on_go_tianxian = () => {
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
            return;
        }
        let { userinfo } = this.state;
        if (!!userinfo) {
            if (!!userinfo.truename) {
                this.props.navigation.navigate('Tianxian', {
                    truename: this.state.userinfo.truename
                });
            } else {
                this.props.navigation.navigate('UserCertification');
            }
        } else {
            this.props.navigation.navigate('UserCertification');
        }


    }
    on_go_UserPush() {
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
            return;
        }
        this.props.navigation.navigate('UserPush');
    }
    on_go_chongzhi(coin,gold){
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
            return;
        }
        this.props.navigation.navigate('ChongZhi',{
            gold:(Number(coin) + Number(gold)).toFixed(2)
        });
    }
    render() {
        let { isLogin, userinfo, coin, gold } = this.state;
        return (
            <View style={styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                >
                    <View>
                        {isLogin ? this.user_logined() : this.user_noLogin()}
                        <View style={styles.amount}>
                            <TouchableOpacity onPress={() => this.on_go_AccountDetails()}>
                                <View style={styles.mingxi}><Text style={{ fontSize: 12, color: '#336699' }}>帐户明细 ></Text></View>
                            </TouchableOpacity>
                            <View style={styles.jine}>
                                <View style={styles.textinfo}>
                                    <Text>{(Number(coin) + Number(gold)).toFixed(2)}</Text>
                                    <Text style={{ color: '#969696', fontSize: 10 }}>账户总额（元）</Text>
                                </View>
                                <View style={styles.textinfo}>
                                    <Text>{Number(gold).toFixed(2)}</Text>
                                    <Text style={{ color: '#969696', fontSize: 10 }}>彩金（元）</Text>
                                </View>
                            </View>
                            <View style={styles.caozuo}>
                                <TouchableOpacity onPress={() => this.on_go_chongzhi(coin,gold)}>
                                    <View style={styles.textinfo2}>
                                        <Image resizeMode="cover" style={styles.mine_cz} source={require('../../image/js_img_icon_mine_cz.png')} />
                                        <Text>充值</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => this.on_go_tianxian()}>
                                    <View style={styles.textinfo2}>
                                        <Image resizeMode="cover" style={styles.mine_cz} source={require('../../image/js_img_icon_mine_tx.png')} />
                                        <Text>提现</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                        </View>


                        <View style={styles.menu}>
                            <TouchableOpacity onPress={() => this.on_go_gameorder()}>
                                <View style={styles.menu_item}>
                                    <Image resizeMode="cover" style={styles.menu_icon} source={require('../../image/js_img_icon_mine_gcjl.png')} />
                                    <Text style={{ color: '#333333' }}>购彩记录</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_go_Guanzhu()}>
                                <View style={styles.menu_item}>
                                    <Image resizeMode="cover" style={styles.menu_icon} source={require('../../image/js_img_icon_mine_wdgz.png')} />
                                    <Text style={{ color: '#333333' }}>我的关注</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_go_site()}>
                                <View style={styles.menu_item}>
                                    <Image resizeMode="cover" style={styles.menu_icon} source={require('../../image/js_img_icon_mine_dzxx.png')} />
                                    <Text style={{ color: '#333333' }}>店主信息</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_go_SafeContent()}>
                                <View style={styles.menu_item}>
                                    <Image resizeMode="cover" style={styles.menu_icon} source={require('../../image/js_img_icon_mine_aqzx.png')} />
                                    <Text style={{ color: '#333333' }}>安全中心</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.on_go_UserPush()}>
                                <View style={styles.menu_item}>
                                    <Image resizeMode="cover" style={styles.menu_icon} source={require('../../image/js_img_icon_mine_tssz.png')} />
                                    <Text style={{ color: '#333333' }}>推送设置</Text>
                                </View>
                            </TouchableOpacity>

                        </View>
                    </View>
                </ScrollView>
            </View>
        )
    }



}
